<meta charset="UTF-8">
 <style>
     * {
         padding: 0;
         margin: 0
     }

     html,
     body {
         height: 100%;
         background-color: black;
     }

     .time {
         width: 200px;
         height: 50px;
         font-size: 40px;
         position: fixed;
         background-color: red;
         text-align: center;
     }

     p {
         width: 200px;
         height: 50px;
         font-size: 40px;
         position: fixed;
         right: 0;
         background-color: red;
         text-align: center;
     }

     .start {
         width: 150px;
         height: 60px;
         position: fixed;
         background-color: green;
         font-size: 30px;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         margin: auto;
         line-height: 60px;
         text-align: center;
     }
 </style>
 <div class="start">开始游戏</div>
 <div class="time">60s</div>
 <p>0分</p>
 <script>
     function random(min, max) {
         return Math.floor(Math.random() * (max - min + 1) + min)
     }
     var num = 60
     var arr = 'abcdefghijklmnopqrituvwsyz'.split('')
    
     document.querySelector('.start').onclick = function () {
         document.querySelector('.start').style.display = 'none'
     t=setInterval(function () {
        var pobj = document.createElement('span')
         num--
         document.querySelector('.time').innerText = num + 's'
         if(num<0){
            clearInterval(t)
            alert('游戏结束')
         }
         var i = random(0, 25)
         pobj.innerText = arr[i]
         pobj.style.color = 'yellow'
         pobj.style.fontSize = 30 + 'px'
         var maxh = (window.innerHeight || document.documentElement.clientHeight) - parseInt(pobj.style.fontSize)-30
         var maxw = (window.innerWidth ||  document.documentElement.clientWidth) - parseInt(pobj.style.fontSize)-30
         var left = random(0, maxw)
         var top = random(50, maxh)
         pobj.style.left = left + 'px'
         pobj.style.top = top + 'px'
         pobj.style.position = 'absolute'
         document.body.appendChild(pobj) 
     }, 1000)
   
    }
 

      var score = 0
      document.onkeydown = function (evt) {
          var e = evt || window.event
          var span = document.querySelectorAll('span')
          var key = e.key || e.witch
           span.forEach(function(item){
          if (item.innerText == key) {
              score++
              var p=document.querySelector('p')
              p.innerText=score+'分'
             item.remove()
          }
      })}
 </script>